<template>
    <!-- 工序分类列表 -->
  <div style="margin-bottom: 10px;">
    <el-button type="primary" @click="openAddDialog">添加</el-button>
    <el-button type="success" @click="exportProcessCategories">导出</el-button>
  </div>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column type="index" label="序号" width="180" />
    <el-table-column prop="categoryCode" label="工序分类编号" width="180" />
    <el-table-column prop="categoryName" label="工序分类名称" width="180" />
    <el-table-column prop="sortOrder" label="排序" width="180" />
    <el-table-column prop="isActive" label="状态" width="180">
      <template #default="scope">
        <span :style="{ color: scope.row.isActive ? '#13ce66' : '#909399', display: 'flex', alignItems: 'center' }">
          <span
            :style="{
              display: 'inline-block',
              width: '8px',
              height: '8px',
              borderRadius: '50%',
              background: scope.row.isActive ? '#13ce66' : '#909399',
              marginRight: '6px'
            }"
          ></span>
          {{ scope.row.isActive ? '启用' : '禁用' }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="remarks" label="备注" width="180" />
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button size="small" @click="openEditDialog(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="deleteProcessCategory(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
   <div style="margin-top: 20px;">
    <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[10, 15, 20, 25]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.TotalCount"
    />
   </div>

   <!-- 新增/编辑工序分类对话框 -->
   <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
    <el-form :model="form" label-width="100px">
      <el-form-item label="工序分类编号">
        <el-input v-model="form.categoryCode" />
      </el-form-item>
      <el-form-item label="工序分类名称">
        <el-input v-model="form.categoryName" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="form.sortOrder" :min="0" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="form.isActive" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remarks" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveProcessCategory">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue';

const page=ref({
    PageIndex:1,
    PageSize:10,
    TotalCount:0
})
watch(page, () => {
    gettableData()
})

//工序分类数据源
const tableData=ref([{
      "id": null,
      "categoryCode": "",
      "categoryName": "",
      "sortOrder": null,
      "isActive": null,
      "remarks": ""
}])

// 控制对话框显示/隐藏
const dialogVisible = ref(false)

// 对话框标题
const dialogTitle = ref('新增工序分类')

// 表单数据
const form = ref({
  "id": null,
  "categoryCode": "",
  "categoryName": "",
  "sortOrder": 0,
  "isActive": true,
  "remarks": ""
})

// 打开添加对话框
const openAddDialog = () => {
  // 重置表单数据
  form.value = {
    id: null,
    categoryCode: '',
    categoryName: '',
    sortOrder: 0,
    isActive: true,
    remarks: ''
  }
  dialogTitle.value = '新增工序分类'
  dialogVisible.value = true
}

// 打开编辑对话框
const openEditDialog = (row: any) => {
  // 设置表单数据为选中行的数据
  form.value = {
    id: row.id,
    categoryCode: row.categoryCode,
    categoryName: row.categoryName,
    sortOrder: row.sortOrder,
    isActive: row.isActive,
    remarks: row.remarks
  }
  dialogTitle.value = '编辑工序分类'
  dialogVisible.value = true
}

// 保存工序分类（新增或编辑）
const saveProcessCategory = () => {
  if (dialogTitle.value === '新增工序分类') {
    // 新增接口
    axios.post("/api/ProcessCategory/AddProcessCategorys", form.value).then(res => {
      if(res.data.code==200){
          ElMessage.success(res.data.message);
          // 处理成功响应
          dialogVisible.value = false
          gettableData() // 重新加载数据
      }else{
          ElMessage.error(res.data.message);
      }
    })
  } else {
    // 编辑接口
    axios.put("/api/ProcessCategory/UpdateProcessCategorys", form.value).then(res => {
      if(res.data.code==200){
          ElMessage.success(res.data.message);
          // 处理成功响应
          dialogVisible.value = false
          gettableData() // 重新加载数据
      }else{
          ElMessage.error(res.data.message);
      }
    })
  }
}

// 删除工序分类
const deleteProcessCategory = (row: any) => {
  ElMessageBox.confirm(
    '确定要删除工序分类 "' + row.categoryName + '" 吗？',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 调用删除接口
    axios.delete("/api/ProcessCategory/DeleteProcessCategorys",{params:{Id:row.id}}).then(res => {
      if(res.data.code==200){
          ElMessage.success(res.data.message);
          gettableData() // 重新加载数据
      }else{
          ElMessage.error(res.data.message);
      }
    }).catch(() => {
      ElMessage.error('删除失败');
    })
  }).catch(() => {
    // 用户取消删除
    ElMessage.info('已取消删除');
  });
}

// 导出工序分类
const exportProcessCategories = () => {
  // 使用window.open打开新的窗口来下载文件
  window.open("/api/ProcessCategory/ExportProcessCategorys", "_blank");
}

const gettableData=()=>{
    axios.get("/api/ProcessCategory/GetProcessCategorys",{params:page.value}).then(res=>{
        tableData.value=res.data.totalPage
        
        page.value.TotalCount=res.data.totalcount
    })
}
onMounted(()=>{
    gettableData()
})
</script>